<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <ui:composition template="./template.xhtml">
        <ui:define name="content">
            <p:growl autoUpdate="true"/>
            
            <p:panel header="Event details" styleClass="middlePanel">
                
                <h:form>
                    <div style="padding: 20px; margin-left: auto; margin-right: auto;">
                        <p:link outcome="home.xhtml?faces-redirect=true" 
                                value="Back" style="margin-right: 10px"/>

                        <p:commandButton value="Modify"
                                         action="/user/modifyEvent.xhtml"
                                         rendered="#{(eventBean.event.organizer.username.equals(userBean.loggedUser.username)) 
                                                     and !(eventBean.event.deleted)
                                                        and !(eventBean.alreadyStarted)}"
                                         style="margin: 5px">
                            <f:param name="idEvent" value="#{eventBean.event.id}"/>
                        </p:commandButton>
                        <p:commandButton value="Delete"
                                     action="#{eventBean.deleteEvent()}" 
                                     rendered="#{(eventBean.event.organizer.username.equals(userBean.loggedUser.username)) 
                                                 and !(eventBean.event.deleted)
                                                 and !(eventBean.alreadyStarted)}"
                                     style="margin: 5px">
                            <p:confirm header="Confirmation" message="Are you sure?" 
                                       icon="ui-icon-alert" />
                        </p:commandButton>
                        <p:commandButton value="Accept Invitation"
                                         action="#{eventBean.acceptInvitation()}"
                                         rendered="#{eventBean.event.userCollection.contains(userBean.loggedUser) and !(eventBean.event.deleted)}"
                                         style="margin: 5px">
                            <p:confirm header="Confirmation" message="Are you sure?" 
                                       icon="ui-icon-alert" />
                        </p:commandButton>
                        <p:commandButton value="Decline Invitation"
                                         action="#{eventBean.declineInvitation()}"
                                         rendered="#{eventBean.event.userCollection.contains(userBean.loggedUser) and !(eventBean.event.deleted)}"
                                         style="margin: 5px">
                            <p:confirm header="Confirmation" message="Are you sure?" 
                                       icon="ui-icon-alert" />
                        </p:commandButton>
                        <p:commandButton value="Decline partecipation"
                                         action="#{eventBean.declineParticipation()}"
                                         rendered="#{eventBean.event.userCollection1.contains(userBean.loggedUser) and !(eventBean.event.organizer.equals(userBean.loggedUser)) and !(eventBean.event.deleted)}"
                                         style="margin: 5px">
                            <p:confirm header="Confirmation" message="Are you sure?" 
                                       icon="ui-icon-alert" />
                        </p:commandButton>
                    </div>
                    
                    <h:panelGrid columns="2" cellpadding="10" styleClass="inMiddlePanel" columnClasses=",leftAlignCol">

                        <h:outputLabel for="name" value="Name: "/>
                        <h:outputText id="name" value="#{eventBean.event.name}"/>
                        
                        <h:outputLabel for="organizer" value="Organizer: "/>
                        <h:outputText id="organizer" value="#{eventBean.event.organizer.username}"/>
                        
                        <h:outputLabel for="isPublic" value="Privacy: "/>
                        <h:outputText id="isPublic" value="Public" rendered="#{eventBean.event.isPublic}"/>
                        <h:outputText id="isPrivate" value="Private" rendered="#{not eventBean.event.isPublic}"/>

                        <h:outputLabel for="startDate" value="Start date: "/>
                        <h:outputText id="startDate" value="#{eventBean.getFormattedDate(eventBean.event.startDate)}"/>

                        <h:outputLabel for="startTime" value="Start time: "/>
                        <h:outputText id="startTime" value="#{eventBean.event.startTime}">
                            <f:convertDateTime pattern="HH:mm" timeZone="GMT+1"/>
                        </h:outputText>

                        <h:outputLabel for="endDate" value="End date: "/>
                        <h:outputText id="endDate" value="#{eventBean.getFormattedDate(eventBean.event.endDate)}"/>

                        <h:outputLabel for="endTime" value="End time: "/>
                        <h:outputText id="endTime" value="#{eventBean.event.endTime}">
                            <f:convertDateTime pattern="HH:mm" timeZone="GMT+1"/>
                        </h:outputText>

                        <h:outputLabel for="place" value="Where: "/>
                        <h:outputText id="place" value="#{eventBean.event.place}"/>

                        <h:outputLabel for="outdoor" value="Location: "/>
                        <h:outputText id="outdoor" value="Outdoor" rendered="#{eventBean.event.outdoor}"/>
                        <h:outputText id="indoor" value="Indoor" rendered="#{not eventBean.event.outdoor}"/>
    

                        <h:outputText value="Description: "/>
                        <p:inputTextarea id="description" value="#{eventBean.event.description}"
                                         maxlength="140" rows="5" 
                                         autoResize="false"
                                         styleClass="description"
                                         readonly="true"/>
                    </h:panelGrid>

                    <p:watermark for="description" value="No description" id="watermarkDescription" />
                
                    <p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
                        <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" 
                                         icon="ui-icon-check" />
                        <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" 
                                         icon="ui-icon-close" />
                    </p:confirmDialog>
                    
                    <p:carousel value="#{weatherBean.weatherForecastList}" headerText="Weather" 
                                var="wf" autoPlayInterval="3000" circular="true" numVisible="1"
                                rendered="#{weatherBean.weatherForecastList.size() != 0}">
                        <h:panelGrid class="weatherGrid" columns="2" style="width:300px; height: 275px;" 
                                     cellpadding="5" columnClasses="rightAlignCol,leftAlignCol">
                            <f:facet name="header">
                                <p:graphicImage name="/images/weatherIcons/#{wf.weather}.png"/> 
                            </f:facet>

                            <h:outputText value="Weather: "/>
                            <h:outputText value="#{weatherBean.getWeatherString(wf)}"/>

                            <h:outputText value="Date: "/>
                            <h:outputText value="#{weatherBean.getFormattedDate(wf)}"/>

                            <h:outputText value="Temp max: " />
                            <h:outputText value="#{wf.tempMax}">
                                <f:convertNumber minFractionDigits="2" />
                            </h:outputText>

                            <h:outputText value="Temp min: " />
                            <h:outputText value="#{wf.tempMin}">
                                <f:convertNumber minFractionDigits="2" />
                            </h:outputText>

                            <h:outputText value="Humidity: " rendered="#{not (wf.humidity == 0)}"/>
                            <h:outputText value="#{wf.humidity}" rendered="#{not (wf.humidity == 0)}"/>
                        </h:panelGrid>
                    </p:carousel>
                </h:form>
                
                <h:form>
                    <p:commandButton id="addInvited" styleClass="addInvitationHidden" update="invitationList"
                                         action="#{eventBean.addInvitedUser()}"/>
                    <p:dataList id="alreadyParticipantList"  value="#{eventBean.participantPeople}" 
                                var="invited" emptyMessage="Noone is going to attend the event" type="definition">
                        <f:facet name="header">
                            Participants
                        </f:facet>
                        <div style="padding: 5px; padding-left: 165px; text-align: left">
                            <h:outputText value="#{invited.username}" style="padding-left: 10px" />
                        </div>
                    </p:dataList>
                    <p:dataList id="invitationList"  value="#{eventBean.invitedPeople}" 
                                var="invited" emptyMessage="No invitations" type="definition">
                        <f:facet name="header">
                            Invitations
                        </f:facet>
                        <div style="padding: 5px; padding-left: 165px; text-align: left">
                            <h:outputText value="#{invited.username}" style="padding-left: 10px" />
                        </div>
                    </p:dataList>
                </h:form>
            
            </p:panel>
        </ui:define>
    </ui:composition> 
</html>
